<template>
    <div class="page-box h100 display-flex czbj">
        <p class="title-label">基本设置</p>
        <div class="mt20 sdfgdgdfyt" v-if="jjhnse">
            <n-form ref="formRef" label-width="120" :model="formValue"  :rules="rules" :inline="false" size="normal" label-placement="left">
                <n-grid :cols="24" :x-gap="20">
                    <n-form-item-gi span="24" label="店铺标题:" path="title" class="mt20">
                        <n-input v-model:value="formValue.title" type="text" placeholder="请输入店铺标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="店铺副标题:" path="ftitle" class="mt20">
                        <n-input v-model:value="formValue.ftitle" type="text" placeholder="请输入店铺副标题" size="medium" clearable></n-input>
                    </n-form-item-gi>
                    <!-- <n-form-item-gi span="8" label="总数量(桶):" path="number" class="mt20">
                        <n-input-number v-model:value="formValue.number" type="text" placeholder="请输入总数量(桶)" size="medium"  clearable></n-input-number>
                    </n-form-item-gi> -->

                    <n-form-item-gi span="6" label="联系电话:" path="phone" class="mt20">
                        <n-input v-model:value="formValue.phone" type="text" placeholder="请输入联系电话" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi span="6" label="二维码:" path="qccode" class="mt20">
                        <div class="logo-context vertical-center ">
                            <upFile :pimgurl="formValue.qccode" FileTitle="二维码" @getFile="(data) => formValue.qccode = data">
                            </upFile>
                        </div>
                    </n-form-item-gi>
                    <n-form-item-gi span="12" label="头部背景图片:" path="cover" class="mt20">
                        <div class="logo-context vertical-center ab">
                            <upFile :pimgurl="formValue.cover" FileTitle="头部背景图片" @getFile="(data) => formValue.cover = data">
                            </upFile>
                        </div>
                    </n-form-item-gi>

                    <n-form-item-gi span="24" label="&nbsp;" path="" class="mt60">
                        <n-button type="primary" class="dfsdtrert" size="medium" @click="baocun">保存</n-button>

                    </n-form-item-gi>

                </n-grid>
            </n-form>
        </div>

    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import photoGallery from "../../components/util/photoGallery";
import upFile from "../../components/util/upFile.vue";
import { callBack, dxpost, qurl, dxget } from "../../util/index"
const formRef = ref()
const jjhnse = ref(false)
const dpid = 18984
const formValue = ref({
    title: "", //标题
    ftitle: "", //副标题
    number: 0, // 总数护理
    phone: "", //联系电话
    qccode: "", // 二维码
    cover: "" // 头部背景图片
})
const apiurl = "shbq/shinfo"
let apitype = "post"
if(dpid){
    apitype = "put"
}
const rules = ref({
    title: {
        required: true,
        message: '请输入店铺标题',
        trigger: 'blur'
    }, ftitle: {
        required: true,
        message: '请输入店铺副标题',
        trigger: 'blur'
    },phone: {
        required: true,
        message: '请输入联系电话',
        trigger: 'blur'
    },qccode: {
        required: true,
        message: '请上传二维码',
        trigger: 'blur'
    },cover: {
        required: true,
        message: '请上传头部背景图片',
        trigger: 'blur'
    },
})
const initData = async()=>{
    const {data}:any = await dxget(apiurl,{id:dpid})
    formValue.value = data
    jjhnse.value = true
}
initData()
const  baocun = ()=>{
    formRef.value?.validate(async (errors) => {
        if (!errors) {
            const { errno }: any = await dxpost(apiurl, formValue.value,apitype)
            window.$message.success("操作成功！")
        }
    })
}
</script>
<style scoped>
.sdfgdgdfyt {
    width: 1200px;
}

.dfsdtrert {
    width: 200px;
    height: 40px;
    font-size: 18px;
}</style>